<<{extend name="cigoadmin@public:editor" /}>>
<<{block name="head-bottom"}>>
<script type="text/javascript" src="__CIGO_PUBLIC__/cigoos/cigoList.js"></script>
<<{/block}>>

<<{block name="tool-bar-btns"}>>
<a class="btn btn-primary addBtn">
    <i class="fa fa-plus-square"></i>
    添加数据
</a>
<<{/block}>>

<<{block name="content"}>>
<div class="input-group" style="width: 100%;min-width: 400px;">
    <span class="input-group-addon">检索:</span>
    <input class="form-control" placeholder="请输入检索词..." type="text" name="keyword" value="<<{$args['keyword']}>>"/>
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
            更多检索条件
        </button>
        <div id="searchPanel" class="dropdown-menu dropdown-menu-right" style="width: 680px;padding: 10px;">
            <div class="panel panel-success" style="margin: 0px;">
                <div class="panel-heading">选择检索条件</div>
                <div class="panel-body">
                    <div class="form-group pull-left">
                        <div class="cigo-edit item-radio label_landscape"
                             cigo-edit-type="landscape"
                             cigo-edit-name="status"
                             cigo-edit-label="状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态"
                             cigo-edit-value="<<{$args['status']}>>"
                             cigo-edit-fun-value-changed="refreshList"
                             cigo-edit-data-radio-options='[{"id": "", "text": "所有"}, {"id":1, "text": "展示"}, {"id": 0, "text": "不展示"}]'
                        ></div>
                    </div>

                    <div class="form-group pull-left" style="margin-left: 15px;">
                        <div class="cigo-edit item-select" cigo-edit-label="广告位置"
                             cigo-edit-name="position"
                             cigo-edit-value="<<{$args['position']}>>"
                             cigo-edit-fun-item-change="refreshList"
                             cigo-edit-select-width="150"
                             cigo-edit-data-select-options="<<{$position}>>">
                        </div>
                    </div>

                    <div class="form-group pull-left" style="margin-left: 15px;">
                        <div id="orderBy" class="cigo-edit item-select" cigo-edit-label="排序方式"
                             cigo-edit-name="orderBy"
                             cigo-edit-value="<<{$args['orderBy']}>>"
                             cigo-edit-data-select-options='[{"id": "create_time", "text": "创建时间"},{"id": "sort", "text": "排序"}]'
                             cigo-edit-fun-item-change="refreshList"
                             cigo-edit-select-width="150"></div>
                    </div>
                    <div class="form-group pull-left" style="clear: right;">
                        <div id="order" class="cigo-edit item-select" cigo-edit-label=""
                             cigo-edit-name="order"
                             cigo-edit-value="<<{$args['order']}>>"
                             cigo-edit-select-no-search-for-result
                             cigo-edit-data-select-options='[{"id": "0", "text": "⬆️"}, {"id": "1", "text": "⬇️"}, ]'
                             cigo-edit-fun-item-change="refreshList"
                             cigo-edit-select-width="50"></div>
                    </div>
                    <div class="form-group pull-left">
                        <div class="cigo-edit item-datetimepicker label_landscape" cigo-edit-label="创建日期"
                             cigo-edit-datetime-format="yyyy-mm-dd"
                             cigo-edit-class="form-control" cigo-edit-style="width: 260px;"
                             cigo-edit-name="startDate"
                             cigo-edit-value="<<{$args['startDate']}>>"
                             cigo-edit-change-date-func="refreshList"
                             cigo-edit-readonly="readonly" cigo-edit-datetime-minview="month"
                             cigo-edit-placeholder="请选择起始日期..."></div>
                    </div>

                    <div class="form-group pull-left">
                        <div class="cigo-edit item-datetimepicker label_landscape" cigo-edit-label="~"
                             cigo-edit-datetime-format="yyyy-mm-dd"
                             cigo-edit-class="form-control" cigo-edit-style="width: 260px;"
                             cigo-edit-name="endDate"
                             cigo-edit-value="<<{$args['endDate']}>>"
                             cigo-edit-change-date-func="refreshList"
                             cigo-edit-readonly="readonly" cigo-edit-datetime-minview="month"
                             cigo-edit-placeholder="请选择结束日期..."></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<br/>
<div class="show-page"></div>
<table id="data-list" class="layui-table" url="<<{:url('getDataList')}>>">
    <thead class="list-head">
    <tr>
        <th>编号</th>
        <th>标题</th>
        <th>位置</th>
        <th>展示时间</th>
        <th width="7%">排序</th>
        <th>状态</th>
        <th>数据操作</th>
    </tr>
    </thead>
</table>
<div class="show-page"></div>
<<{/block}>>

<<{block name="js-footer"}>>
<script type="text/javascript">
    var listPlugin;
    var pageInitFlag = false;
    $(function () {
        initView();
        initEvent();
        pageInitFlag = true;
    });

    function initView() {
        //初始化列表插件
        listPlugin = new CigoList({
            listView: $('#data-list'),
            dataSrcUrl: "<<{:url('getDataList')}>>",
            pageContainerCls: 'show-page',
            //1. 模拟回调函数第一种匿名函数写法
            argsFunc: function () {
                var keyword = $('input[name="keyword"]:first').val();
                var status = $('input[name="status"]:checked').val();
                var startDate = $('input[name="startDate"]:first').val();
                var endDate = $('input[name="endDate"]:first').val();
                var orderBy = $('#orderBy select:first').select2('data');
                orderBy = (orderBy.length > 0) ? orderBy[0].id : 'create_time';
                var order = $('#order select:first').select2('data');
                order = (order.length > 0) ? order[0].id : '1';
                var position = $('select[name="position"]:first').val();

                return {
                    'keyword': keyword,
                    'status': status,
                    'startDate': startDate,
                    'endDate': endDate,
                    'orderBy': orderBy,
                    'order': order,
                    'position': position
                };
            },
            //2. 模拟配置项回调函数第二种函数名写法
            renderItemViewFunc: createTr,
        });
        //刷新列表
        listPlugin.renderList(true, true, false);
    }

    function refreshList(refreshFlag = true) {
        if (pageInitFlag) {
            listPlugin.renderList(refreshFlag, false, false);
        }
    }

    function createTr(dataListView, itemSubViewList, listKey, dataItem, level, hasSubFlag, hasSubCls) {
        itemSubViewList.push(
            '<tr class="list-item">' +
            '   <td>' + dataItem['id'] + '</td>' +
            '   <td>' + dataItem['title'] + '</td>' +
            '   <td>' + dataItem['position'] + '</td>' +
            '   <td>' + dataItem['start_time'] + ' ~ ' + dataItem['end_time'] + '</td>' +
            '   <td>' + '<input class="form-control cigo-edit quik-edit" cigo-edit-url=\'<<{:url("editValItem")}>>\' cigo-edit-val-item-key="sort" cigo-edit-val-item-val="' + dataItem['sort'] + '" cigo-edit-id="' + dataItem['id'] + '" type="text" value="' + dataItem['sort'] + '" />' + '</td>' +
            '   <td>' + dataItem['status_msg'] + '</td>' +
            '   <td>' +
            '       ' + getStatusBtn(dataItem['id'], dataItem['status']) +
            '       <a class="btn btn-info btn-sm editbtn editbtn" href="#" data-id="' + dataItem['id'] + '">编辑</a>&nbsp;' +
            '       <a class="btn btn-sm ajax-get confirm" href=\'<<{:url("setStatus", false, false)}>>' + Think.DEEP + 'id' + Think.DEEP + dataItem['id'] + Think.DEEP + 'status' + Think.DEEP + '-1' + Think.DEEP + 'ctrlTip' + Think.DEEP + '删除\'  style="background-color: #999">删除</a>' +
            '   </td>' +
            '</tr>'
        );
    }

    function initEvent() {
        $('#searchPanel').click(function (e) {
            e.stopPropagation();
        });
        $('input[name="keyword"]:first').keydown(function (event) {
            if ((event.which || event.keyCode) === 13) {
                refreshList();
            }
        });
        $('.addBtn').click(function () {
            cigoLayer.open({
                title: ['添加广告位', 'font-size: 16px;font-weight: bold;'],
                type: 2,
                area: ['70%', '90%'],
                fix: false,
                scrollbar: false,
                maxmin: true,
                shade: [0.5, '#ffffff'],
                shadeClose: false,
                skin: 'layui-layer-rim',
                content: "<<{:url('add', false, false)}>>"
            });
            return false;
        });
        $('#data-list').on('click', '.editbtn', function () {
            cigoLayer.open({
                title: ['修改广告位', 'font-size: 16px;font-weight: bold;'],
                type: 2,
                area: ['70%', '90%'],
                fix: false,
                scrollbar: false,
                maxmin: true,
                shade: [0.5, '#ffffff'],
                shadeClose: false,
                skin: 'layui-layer-rim',
                content: "<<{:url('edit', false, false)}>>" + Think.DEEP + 'id' + Think.DEEP + $(this).data('id')
            });
            return false;
        });
    }

    function getStatusBtn(id, status) {
        var btnCls = 'btn-success btn-sm';
        switch (status) {
            case 0:
                btnCls = 'btn-success btn-sm';
                break;
            case 1:
                btnCls = 'btn-danger btn-sm';
        }

        return '' +
            '<button class="btn ' + btnCls + ' ajax-get confirm" href=\'<<{:url("setStatus", false, false)}>>' +
            Think.DEEP + 'id' + Think.DEEP + id + Think.DEEP + 'status' + Think.DEEP + Math.abs(1 - status) +
            Think.DEEP + 'ctrlTip' + Think.DEEP + show_status_label(status, ['展示', '不展示']) + '\'' +
            '>' + show_status_label(status, ['展示', '不展示']) +
            '</button>&nbsp;'
    }

</script>
<<{/block}>>
